/***
 * ShardingComponent 
 */
define( [ 'Vue', 'axios' ], function ( Vue, axios ) {
    return Vue.component('graph-data', {
        data : function() {
            return {
                sharding : {}
            };
        },

        mounted : function () {
            var _this = this;
            axios.get( 'sharding.api?host=' + _this.$route.query.host +'&port=' +_this.$route.query.port ) .then(function (response) {
                if ( typeof(response.data) == 'string' ) {
                    console.log('#16 sharding.api error', response);
                    return;
                }

                _this.sharding = response.data;
            });
        },

        methods : {
            handleUpdate : function() {
                var _this = this;
                var postData = {};

                $(".value").each(function(index, each) {
                    postData[$(each).data("key")] = $(each).val();
                });

                axios.get( 'sharding-update.api?host=' + _this.$route.query.host +'&port=' +_this.$route.query.port, {
                    params : postData
                }) .then(function (response) {
                    alert(JSON.stringify(response.data));
                });
            }
        },

        template : `
            <div>
                <a>ShardingComponent</a>
                <br/>
                <br/>
                <a href="#/">INDEX PAGE</a>
                <br/>
                <br/>

                <table border="1">
                    <tr>
                        <td><a>Name</a></td>
                        <td><a>Weight</a></td>
                    </tr>

                    <tr v-for="(value, key) in sharding">
                        <td>{{key}}</td>
                        <td>
                            <input :data-key="key" class="value" v-model="value"/>
                        </td>
                    </tr>

                    <tr>
                        <td></td>
                        <td>
                            <input type="button" value="修改" @click="handleUpdate"/>
                        </td>
                    </tr>
            </div>
            `
    });
});